<template>
	<view class="container">
		<QSTabs ref="tabs" :tabs="tabs" animationMode="line3" :current="current" @change="change" activeColor="#adadad"
		 :minWidth="250" animationLineWidth="30"  space="20" backgroundColor="#ffffff" lineColor="#f1505c" swiperWidth="750">
		</QSTabs>
		<swiper class="swiper-height" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" style="height: 100%;" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="scroll-items" v-for="(item,index) in news_list" @tap="gonews(item.news_id)">
						<view class="left-box">
							<view class="title">{{item.title}}</view>
							<!-- <view class="content">{{item.content}}</view> -->
							<view class="time-box">
								<image src="../../../static/images/time.png" mode="" class="time-img"></image>
								<view class="time-text">{{item.add_time}}</view>
							</view>
						</view>
						<image :src="item.title_img" mode="" class="right-box"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import QSTabs from '../../appoint/component/QS-tabs/QS-tabs.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	let n = 1;
	// const getunpaidmentlist = () => {
	// 	common.post('HouseApi&a=village_activity', {
	// 		village_id: _this.village_id,
	// 		pigcms_id: _this.pigcms_id,
	// 		activity_id: _this.id
	// 	}, data => {
	// 		console.log('++++', data)
	// 		_this.listdata = data;
	// 	});
	// };
	
	// const getactivityapply = () => {
	// 	console.log('++++', _this.peoplenum)
	// 	common.post('HouseApi&a=village_activity_apply', {
	// 		village_id: _this.village_id,
	// 		pigcms_id: _this.pigcms_id,
	// 	}, data => {
	// 		console.log('++++', _this.peoplenum)
			
	// 	});
	// };
	const tabs = Array(30).fill('').map(() => '' + Array(n).fill('').join('') + n++);
	export default {
		data() {
			return {
				listdata: {},
				tabs: [...tabs],
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				itemWidth: '25%',
				record_log_count: '',
				QSTabsWxsListHeight: '',
				dx: 0,
				cat_id:'',
				news_list:[],
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad: function(options) {
			_this = this;
			common.setMainColor(_this, function(config) {
				_this.fab_pattern = {
					buttonColor: app.globalData.config.config.mobile_head_color
				}
				if (app.globalData.tabBar && app.globalData.tabBar.list) {
					_this.fab_content = app.globalData.tabBar.list;
				}
		
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.village_name = res.village_name;
					_this.pigcms_id = res.pigcms_id;
					_this.village_logo = res.village_logo;
				}
		
				if (options.village_id) {
					common.post('HouseApi&a=search_village', {
						village_id: options.village_id
					}, data => {
						_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
						_this.village_id = options.village_id;
						_this.village_name = data.village_name;
		
						var res = {
							village_id: _this.village_id,
							village_name: _this.village_name,
							village_logo: _this.village_logo
						};
						if (options.pigcms_id) {
							res.pigcms_id = options.pigcms_id;
							_this.pigcms_id = options.pigcms_id;
						}
						uni.setStorageSync('village_key', res);
						_this.getVillageNewslist();
					});
				} else {
					_this.getVillageNewslist();
				}
			});
		},
		methods: {
			change(index,item) {
				console.log("heiheihhhh",item);
				_this.showhide = false;
				_this.swiperCurrent = index;
			},
			gonews(news_id){
				uni.navigateTo({
					url: '/pages/village/index/villagecontent?news_id=' + news_id,
				})
			},
			transition({
				detail: {
					dx
				}
			}) {
				_this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				_this.$refs.tabs.setFinishCurrent(current);
				_this.swiperCurrent = current;
				_this.current = current;
			},
			getVillageNewslist(cat_id, pageIndex) {
				// 获取公告消息
				if (!cat_id) {
					cat_id = _this.cat_id;
				}
				if (!pageIndex) {
					pageIndex = _this.pageIndex;
				}
				common.post('House_street&a=village_street_newslist', {
					village_id: _this.village_id,
					pigcms_id: _this.pigcms_id,
					cat_id: cat_id,
					page: pageIndex
				}, data => {
					if (data.category_list && data.category_list[0]) {
						_this.category_list = data.category_list;
						var cat_rr = [];
						for (var i in data.category_list) {
							if (data.category_list[i] && data.category_list[i]['cat_name']) {
								cat_rr.push(data.category_list[i]['cat_name'])
							}
						}
						_this.tabs = cat_rr
						console.log("uiuiuiuiuiu",_this.tabs)
						_this.no_data = false;
					} else {
						_this.no_data = true;
					}
					if (data.news_list && data.news_list[0]) {
						_this.news_list = data.news_list;
						_this.no_data = false;
					} else {
						_this.news_list = [];
						_this.no_data = true;
					}
				});
			},
		},
		components: {
			QSTabs,
		}
	}
</script>

<style>
	page {
		background: rgb(245,245,245);
	}
	.container {
		margin: 0;
		padding: 0;
	}
	.scroll-items {
		margin-top: 15rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
	}
	.left-box {
		display: flex;
		flex-direction: column;
	}
	.right-box {
		flex-shrink: 0;
		width: 260rpx;
		height: 200rpx;
		display: block;
	}
	.time-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15rpx;
	}
	.title{
		font-size: 28rpx;
		font-weight: 700;
		line-height: 60rpx;
	}
	.content {
		margin-top: 15rpx;
		font-size: 28rpx;
		line-height: 50rpx;
	}
	.time-text {
		color: #B7B7B7;
	}
	.time-img {
		width: 32rpx;
		height: 32rpx;
		display: block;
		margin-right: 8rpx;
	}
	.swiper-height {
		height: calc(100vh - 80rpx);
	}
</style>
